<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
    <style type="text/css">
        <![CDATA[
            text {
                font-size: 14px;
            }
            .back {
                stroke: #ccc;
                stroke-width: 1px;
                fill:none;
            }
            .front {
                stroke: #800;
                stroke-width: 3px;
                fill:none;
            }
        ]]>
    </style>
    <g transform="translate(10, 10)">
        <g>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 57, 173;"></path>
            <text transform="translate(130, 20)">30% stroke-dasharray: 57, 173;</text>
        </g>
        <g transform="translate(0, 60)">
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 86.5, 173;"></path>
            <text transform="translate(130, 20)">50% stroke-dasharray: 86.5, 173;</text>
        </g>
        <g transform="translate(0, 120)">
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 173, 173;"></path>
            <text transform="translate(130, 20)">100% stroke-dasharray: 173, 173;</text>
        </g>
        <g transform="translate(0, 180)">
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 0, 173;">
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 173" to="173, 173"
                    dur="3s"
                    repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>
